<template>
  <div class="about-container">
    <h1 class="hacker-title">NEXUS操作系统信息</h1>
    
    <div class="main-content">
      <div class="info-panel">
        <h2 class="section-title">系统指标</h2>
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">版本</div>
            <div class="info-value">{{ systemInfo.version }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">构建日期</div>
            <div class="info-value">{{ systemInfo.buildDate }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">组件数</div>
            <div class="info-value">{{ systemInfo.components }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">状态</div>
            <div class="info-value status-online">{{ systemInfo.status === 'ONLINE' ? '在线' : systemInfo.status }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">安全等级</div>
            <div class="info-value security-high">{{ systemInfo.securityLevel === 'HIGH' ? '高级' : systemInfo.securityLevel }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">运行时间</div>
            <div class="info-value uptime">{{ systemInfo.uptime }}</div>
          </div>
        </div>
      </div>
      
      <div class="terminal-panel">
        <div class="terminal-header">
          <div class="terminal-title">系统终端</div>
          <div class="terminal-controls">
            <div class="terminal-dot terminal-dot-red"></div>
            <div class="terminal-dot terminal-dot-yellow"></div>
            <div class="terminal-dot terminal-dot-green"></div>
          </div>
        </div>
        <div class="terminal-content" ref="terminalRef">
          <div class="terminal-welcome">
            <p>欢迎使用NEXUS系统终端</p>
            <p>输入'help'查看可用命令</p>
          </div>
          <div v-for="(log, index) in logs" :key="index" class="terminal-log">
            {{ log }}
          </div>
          <div class="terminal-input-line">
            <span class="terminal-prompt">></span>
            <input 
              v-model="commandInput" 
              class="terminal-input" 
              placeholder="输入命令..." 
              @keyup.enter="handleCommandInput"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const systemInfo = ref<{
  version: string
  buildDate: string
  components: number
  status: string
  securityLevel: string
  uptime: string
}>({
  version: 'v2.3.5',
  buildDate: '20240615.01',
  components: 17,
  status: 'ONLINE',
  securityLevel: 'HIGH',
  uptime: '00:00:00'
})

const logs = ref<string[]>([])
const terminalRef = ref<HTMLElement>()
const commandInput = ref('')

// 初始化计时器
let uptimeInterval: number

// 添加系统日志
const addLog = (message: string) => {
  const timestamp = new Date().toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  logs.value.push(`[${timestamp}] ${message}`)
  
  // 限制日志数量
  if (logs.value.length > 8) {
    logs.value.shift()
  }
  
  // 滚动到底部
  setTimeout(() => {
    if (terminalRef.value) {
      terminalRef.value.scrollTop = terminalRef.value.scrollHeight
    }
  }, 10)
}

// 处理终端命令输入
const handleCommandInput = () => {
  const command = commandInput.value.trim()
  
  if (command) {
    // 清空输入
    commandInput.value = ''
    
    // 滚动到底部
    setTimeout(() => {
      if (terminalRef.value) {
        terminalRef.value.scrollTop = terminalRef.value.scrollHeight
      }
    }, 10)
    
    // 模拟命令执行
    simulateCommand(command)
  }
}

// 模拟命令执行
const simulateCommand = (command: string) => {
  // 添加命令日志
  addLog(`[CMD] ${command}`)
  
  // 模拟不同命令的响应
    setTimeout(() => {
      if (command.toLowerCase() === 'help') {
        addLog('可用命令:')
        addLog('- help: 显示可用命令')
        addLog('- clear: 清空终端')
        addLog('- system: 显示系统信息')
        addLog('- version: 显示版本信息')
      } else if (command.toLowerCase() === 'clear') {
        logs.value = []
      } else if (command.toLowerCase() === 'system') {
        addLog('系统: NEXUS 操作系统')
        addLog(`版本: ${systemInfo.value.version}`)
        addLog(`状态: ${systemInfo.value.status === 'ONLINE' ? '在线' : systemInfo.value.status}`)
      } else if (command.toLowerCase() === 'version') {
        addLog(`NEXUS 操作系统 ${systemInfo.value.version}`)
        addLog(`构建版本: ${systemInfo.value.buildDate}`)
      } else {
        addLog(`未找到命令: ${command}`)
        addLog('输入 "help" 查看可用命令')
      }
    }, 300)
}

// 初始化数字雨效果
const initMatrixRain = () => {
  const aboutContainer = document.querySelector('.about-container')
  if (!aboutContainer) return
  
  const matrixRain = document.createElement('div')
  matrixRain.classList.add('matrix-rain')
  aboutContainer.appendChild(matrixRain)
  
  const chars = '10101010101010101010'
  
  for (let i = 0; i < 30; i++) {
    const charElement = document.createElement('div')
    charElement.classList.add('matrix-char')
    charElement.textContent = chars[Math.floor(Math.random() * chars.length)]
    charElement.style.left = `${Math.random() * 100}%`
    charElement.style.top = `${Math.random() * 100}%`
    charElement.style.fontSize = `${Math.random() * 6 + 4}px`
    charElement.style.animationDuration = `${Math.random() * 5 + 5}s`
    charElement.style.animationDelay = `${Math.random() * 3}s`
    matrixRain.appendChild(charElement)
  }
}

// 组件挂载时初始化
onMounted(() => {
  // 添加系统初始化日志
  addLog('[SYSTEM] About module initialized')
  addLog('[INFO] Loading system information...')
  
  // 模拟加载延迟
  setTimeout(() => {
    addLog('[INFO] System information loaded successfully')
    addLog('[SECURITY] Access level: USER')
  }, 800)
  
  // 启动运行时间计时器
  let seconds = 0
  uptimeInterval = window.setInterval(() => {
    seconds++
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const remainingSeconds = seconds % 60
    
    systemInfo.value.uptime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
  }, 1000)
  
  // 初始化数字雨效果
  initMatrixRain()
})

// 组件卸载时清理
onUnmounted(() => {
  if (uptimeInterval) {
    clearInterval(uptimeInterval)
  }
})
</script>

<style scoped>
:root {
  --hacker-bg: #0a0a0a;
  --hacker-green: #00ff4c;
  --hacker-green-glow: rgba(0, 255, 76, 0.5);
  --hacker-dark-green: #005518;
  --hacker-yellow: #ffff00;
  --hacker-red: #ff0000;
  --hacker-gray: #2a2a2a;
  --hacker-light-gray: #4a4a4a;
}

.about-container {
  width: 100%;
  min-height: 100vh;
  background-color: var(--hacker-bg);
  color: var(--hacker-green);
  font-family: 'Courier New', Courier, monospace;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.hacker-title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hacker-green);
  text-shadow: 0 0 10px var(--hacker-green-glow);
  animation: title-flicker 2s infinite;
}

@keyframes title-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px var(--hacker-green-glow), 0 0 20px var(--hacker-green-glow), 0 0 30px var(--hacker-green-glow);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

.main-content {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.info-panel {
  flex: 1;
  background-color: var(--hacker-gray);
  border: 1px solid var(--hacker-green-glow);
  border-radius: 5px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.info-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hacker-green), transparent);
  animation: scan-line 2s infinite;
}

@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000%);
  }
}

.section-title {
  font-size: 20px;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hacker-green);
  border-bottom: 1px solid var(--hacker-green-glow);
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-item {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hacker-dark-green);
  padding: 15px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.info-item:hover {
  border-color: var(--hacker-green);
  box-shadow: 0 0 10px rgba(0, 255, 76, 0.3);
}

.info-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--hacker-light-gray);
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.info-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--hacker-green);
}

.status-online {
  color: var(--hacker-green);
}

.security-high {
  color: var(--hacker-yellow);
}

.uptime {
  color: var(--hacker-green);
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
}

.terminal-panel {
  flex: 1;
  background-color: var(--hacker-gray);
  border: 1px solid var(--hacker-green-glow);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.terminal-header {
  background-color: var(--hacker-dark-green);
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hacker-green);
}

.terminal-title {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--hacker-green);
  letter-spacing: 1px;
}

.terminal-controls {
  display: flex;
  gap: 8px;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot-red {
  background-color: var(--hacker-red);
}

.terminal-dot-yellow {
  background-color: var(--hacker-yellow);
}

.terminal-dot-green {
  background-color: var(--hacker-green);
}

.terminal-content {
  flex: 1;
  padding: 20px;
  font-size: 12px;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 400px;
  background-color: var(--hacker-bg);
  position: relative;
}

.terminal-welcome {
  margin-bottom: 15px;
  color: var(--hacker-yellow);
}

.terminal-welcome p {
  margin: 5px 0;
}

.terminal-log {
  margin: 5px 0;
  color: var(--hacker-green);
  white-space: pre-wrap;
}

.terminal-input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.terminal-prompt {
  color: var(--hacker-green);
  margin-right: 10px;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hacker-green);
  font-family: inherit;
  font-size: inherit;
}

/* 数字雨效果 */
.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}

.matrix-char {
  position: absolute;
  color: var(--hacker-green);
  font-family: 'Courier New', monospace;
  opacity: 0;
  animation: matrix-fall linear infinite;
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-10px);
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(calc(100vh + 10px));
    opacity: 0;
  }
}

/* 自定义滚动条 */
.terminal-content::-webkit-scrollbar {
  width: 10px;
}

.terminal-content::-webkit-scrollbar-track {
  background: var(--hacker-bg);
  border-left: 1px solid var(--hacker-dark-green);
}

.terminal-content::-webkit-scrollbar-thumb {
  background: var(--hacker-dark-green);
  border: 1px solid var(--hacker-green);
  border-radius: 5px;
}

.terminal-content::-webkit-scrollbar-thumb:hover {
  background: var(--hacker-green);
  box-shadow: 0 0 8px var(--hacker-green-glow);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  
  .terminal-panel {
    width: 100%;
    position: static;
  }
  
  .terminal-content {
    max-height: 300px;
  }
  
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .hacker-title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 15px;
  }
  
  .info-panel {
    padding: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .hacker-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .terminal-content {
    font-size: 11px;
  }
}
</style>
